<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厂房房源 - 吉象出海</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --industrial: #3A6EA5; /* 工业蓝 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
            --radius: 8px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
		  /* 全局链接样式 */
        a {
            color: inherit;
            text-decoration: none;
        }
        
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 60px;
        }
        
        /* 顶部品牌区 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
        }
        
        .rate-badge {
            position: absolute;
            right: 15px;
            top: 15px;
            background: var(--secondary);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 三阶漏斗式筛选 - 厂房版 */
        .filter-section {
            padding: 15px;
            background: var(--light-bg);
            border-bottom: 1px solid #e5e7eb;
        }
        
        .filter-steps {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .filter-step {
            flex: 1;
            background: white;
            border-radius: 20px;
            padding: 8px 12px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            box-shadow: var(--card-shadow);
            position: relative;
            cursor: pointer;
        }
        
        .filter-step.active {
            background: var(--industrial);
            color: white;
        }
        
        .filter-step:after {
            content: ">";
            position: absolute;
            right: -8px;
            top: 50%;
            transform: translateY(-50%);
            color: #9CA3AF;
            font-weight: bold;
        }
        
        .filter-step:last-child:after {
            display: none;
        }
        
        .hot-regions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }
        
        .region-tag {
            background: rgba(58, 110, 165, 0.1);
            color: var(--industrial);
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 12px;
        }
        
        .region-tag.active {
            background: var(--industrial);
            color: white;
        }
        
        /* 工业筛选条件 */
        .industrial-filters {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
        }
        
        .filter-label {
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 5px;
        }
        
        .filter-select {
            padding: 8px;
            border-radius: var(--radius);
            border: 1px solid #e5e7eb;
            background: white;
            font-size: 13px;
        }
        
        /* 排序栏 */
        .sort-section {
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .sort-options {
            display: flex;
            gap: 15px;
            font-size: 13px;
        }
        
        .sort-option {
            color: #6B7280;
        }
        
        .sort-option.active {
            color: var(--industrial);
            font-weight: 500;
        }
        
        .filter-toggle {
            font-size: 13px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 厂房卡片 */
        .property-list {
            padding: 0 15px;
        }
        
        .property-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            position: relative;
        }
        
        .property-card.featured {
            border: 2px solid var(--industrial);
        }
        
        .property-image {
            height: 200px;
            background: #E5E7EB;
            position: relative;
        }
        
        .property-favorite {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            cursor: pointer;
        }
        
        .property-favorite.active {
            color: var(--danger);
        }
        
        .property-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--industrial);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .property-vr {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .property-content {
            padding: 15px;
        }
        
        .property-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        .property-agent {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .agent-badge {
            background: var(--secondary);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .property-location {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #6B7280;
            margin-bottom: 10px;
        }
        
        .property-location::before {
            content: "📍";
            margin-right: 4px;
        }
        
        .property-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 12px;
        }
        
        .property-price {
            color: var(--danger);
            font-weight: 700;
            font-size: 18px;
        }
        
        .price-comparison {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
        }
        
        .property-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }
        
        .property-tag {
            background: var(--light-bg);
            color: var(--text);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .tag-level1 {
            background: rgba(208, 2, 27, 0.1);
            color: var(--danger);
        }
        
        .tag-level2 {
            background: rgba(46, 139, 87, 0.1);
            color: var(--secondary);
        }
        
        /* 厂房特殊卡片 */
        .industrial-property .property-details {
            flex-direction: column;
            gap: 8px;
        }
        
        .industrial-features {
            display: flex;
            gap: 10px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        
        .industrial-feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px;
            background: rgba(58, 110, 165, 0.05);
            border-radius: var(--radius);
            font-size: 12px;
            min-width: 70px;
        }
        
        .industrial-feature-value {
            font-weight: 700;
            color: var(--industrial);
            margin-top: 4px;
            font-size: 14px;
        }
        
        .industrial-feature-icon {
            font-size: 16px;
            margin-bottom: 4px;
            color: var(--industrial);
        }
        
        .trust-badges {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            font-size: 12px;
        }
        
        .trust-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #6B7280;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            max-width: 428px;
            margin: 0 auto;
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 12px;
            color: #9CA3AF;
            transition: all 0.3s;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        /* 详情页样式 */
        .detail-header {
            position: relative;
            height: 280px;
            background: #e0e7ff;
        }
        
        .detail-back {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0,0,0,0.5);
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .detail-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            padding: 15px;
        }
        
        .detail-title h1 {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .detail-price {
            font-size: 24px;
            font-weight: 700;
            color: #ffdd40;
        }
        
        .detail-content {
            padding: 15px;
        }
        
        .detail-section {
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .detail-section-title {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--industrial);
        }
        
        .detail-section-title i {
            font-size: 20px;
        }
        
        .industrial-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .detail-item {
            background: #f5f9ff;
            border-radius: var(--radius);
            padding: 12px;
        }
        
        .detail-label {
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 5px;
        }
        
        .detail-value {
            font-size: 16px;
            font-weight: 500;
        }
        
        .detail-features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .feature-tag {
            background: rgba(58, 110, 165, 0.1);
            color: var(--industrial);
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 13px;
        }
        
        .detail-map {
            height: 200px;
            background: #e0e7ff;
            border-radius: var(--radius);
            margin: 15px 0;
        }
        
        .detail-plan {
            height: 300px;
            background: #f0f5ff;
            border-radius: var(--radius);
            margin: 15px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--industrial);
            font-weight: 500;
        }
        
        .agent-contact {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: var(--radius);
            margin-top: 20px;
        }
        
        .agent-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e0e7ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .agent-info {
            flex: 1;
        }
        
        .agent-name {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .agent-rating {
            display: flex;
            align-items: center;
            gap: 3px;
            color: #eaa82a;
            font-size: 12px;
        }
        
        .contact-button {
            background: var(--industrial);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--radius);
            font-weight: 500;
            cursor: pointer;
        }
        
        /* 切换标签 */
        .tab-container {
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
            border-bottom: 1px solid #eee;
        }
        
        .tabs {
            display: flex;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #6B7280;
        }
        
        .tab.active {
            color: var(--industrial);
            font-weight: 500;
            border-bottom: 2px solid var(--industrial);
        }
        
        .tab-content {
            display: none;
            padding: 15px;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .industrial-details {
                grid-template-columns: 1fr;
            }
        }
		/* 优化后的底部导航菜单 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: white;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    max-width: 428px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
}

/* 修改后的底部导航项样式 */
.tab-bar a.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px 10px;
    min-height: 60px;
    border-radius: 16px;
    margin: 0 5px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    color: #495057;
}

.tab-item.active {
    background: rgba(234, 168, 42, 0.15);
    color: var(--primary);
}

.tab-item.active .tab-icon {
    color: var(--primary);
    transform: scale(1.1);
}

.tab-item.active .tab-label {
    font-weight: 600;
}

.tab-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    color: #6c757d;
}

.tab-item.active .tab-icon {
    color: var(--primary);
}

.tab-label {
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}
    </style>
</head>
<body>
    <!-- 列表页内容 -->
    <div id="list-page">
        <!-- 顶部品牌区域 -->
        <header class="brand-header">
			 <a href="home.html" class="back-button" style="position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--text);">
        <i class="fas fa-arrow-left"></i>
    </a>
            <div class="brand-title">吉象出海</div>
            <div class="brand-subtitle">泰国工业地产服务</div>
        
        </header>
        
        <!-- 筛选区域 -->
        <section class="filter-section">
            <div class="filter-steps">
                <div class="filter-step active">厂房</div>
                <div class="filter-step">东部经济走廊</div>
                <div class="filter-step">筛选</div>
            </div>
            
            <div class="hot-regions">
                <div class="region-tag active">罗勇工业园</div>
                <div class="region-tag">林查班港区</div>
                <div class="region-tag">春武里工业区</div>
                <div class="region-tag">北柳府</div>
                <div class="region-tag">更多</div>
            </div>
            
            <div class="industrial-filters">
                <div class="filter-group">
                    <div class="filter-label">厂房类型</div>
                    <select class="filter-select">
                        <option>全部类型</option>
                        <option>标准厂房</option>
                        <option>定制厂房</option>
                        <option>仓储物流</option>
                        <option>研发中心</option>
                    </select>
                </div>
                <div class="filter-group">
                    <div class="filter-label">面积 (㎡)</div>
                    <select class="filter-select">
                        <option>全部面积</option>
                        <option>0-500㎡</option>
                        <option>500-2000㎡</option>
                        <option>2000-5000㎡</option>
                        <option>5000㎡以上</option>
                    </select>
                </div>
                <div class="filter-group">
                    <div class="filter-label">层高 (米)</div>
                    <select class="filter-select">
                        <option>全部层高</option>
                        <option>6米以下</option>
                        <option>6-9米</option>
                        <option>9-12米</option>
                        <option>12米以上</option>
                    </select>
                </div>
                <div class="filter-group">
                    <div class="filter-label">承重 (吨/㎡)</div>
                    <select class="filter-select">
                        <option>全部承重</option>
                        <option>1吨以下</option>
                        <option>1-3吨</option>
                        <option>3-5吨</option>
                        <option>5吨以上</option>
                    </select>
                </div>
            </div>
        </section>
        
        <!-- 排序区域 -->
        <section class="sort-section">
            <div class="sort-options">
                <div class="sort-option active">综合推荐</div>
                <div class="sort-option">最新</div>
                <div class="sort-option">价格</div>
                <div class="sort-option">面积</div>
            </div>
            
            <div class="filter-toggle">
                <span>更多筛选</span>
                <span>▼</span>
            </div>
        </section>
        
        <!-- 房源列表 -->
        <div class="property-list">
            <!-- 工业厂房卡片 1 -->
            <div class="property-card industrial-property featured" data-id="1">
                <div class="property-image">
                    <div class="property-favorite">❤️</div>
                    <div class="property-badge">BOI企业</div>
                    <div class="property-vr">🟢 VR实景</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>罗勇高新科技园标准厂房</span>
                        <span class="property-price">18,500泰铢/月</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>陈经理 · 服务分98</span>
                    </div>
                    
                    <div class="property-location">罗勇·距林查班港5km</div>
                    
                    <div class="property-details">
                        <div>2,500㎡ | 层高9m | 承重3T</div>
                        <div class="price-comparison">区域均价：20,000泰铢/月</div>
                    </div>
                    
                    <div class="industrial-features">
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">⚡</div>
                            <div>电力容量</div>
                            <div class="industrial-feature-value">800KVA</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🏗️</div>
                            <div>行车</div>
                            <div class="industrial-feature-value">10吨</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🚛</div>
                            <div>卸货平台</div>
                            <div class="industrial-feature-value">4个</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🅿️</div>
                            <div>停车位</div>
                            <div class="industrial-feature-value">30个</div>
                        </div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag tag-level1">🔥必看好房</div>
                        <div class="property-tag">保税仓库</div>
                        <div class="property-tag">环评通过</div>
                        <div class="property-tag">24小时安保</div>
                        <div class="property-tag">高速网络</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
            
            <!-- 工业厂房卡片 2 -->
            <div class="property-card industrial-property" data-id="2">
                <div class="property-image">
                    <div class="property-favorite active">❤️🔥</div>
                    <div class="property-badge">急租优惠</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>春武里定制化生产车间</span>
                        <span class="property-price">45,000,000泰铢</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>林经理 · 服务分94</span>
                    </div>
                    
                    <div class="property-location">春武里·距曼谷80km</div>
                    
                    <div class="property-details">
                        <div>5,800㎡ | 层高12m | 承重5T</div>
                        <div class="price-comparison">同区域参考价：48,000,000泰铢</div>
                    </div>
                    
                    <div class="industrial-features">
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🏭</div>
                            <div>生产区域</div>
                            <div class="industrial-feature-value">4,200㎡</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🏢</div>
                            <div>办公区域</div>
                            <div class="industrial-feature-value">600㎡</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">💧</div>
                            <div>供排水</div>
                            <div class="industrial-feature-value">完善</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🌡️</div>
                            <div>空调系统</div>
                            <div class="industrial-feature-value">中央空调</div>
                        </div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag tag-level2">🌟新上房源</div>
                        <div class="property-tag">可分割</div>
                        <div class="property-tag">环评A类</div>
                        <div class="property-tag">双电路</div>
                        <div class="property-tag">自有变电站</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
            
            <!-- 工业厂房卡片 3 -->
            <div class="property-card industrial-property" data-id="3">
                <div class="property-image">
                    <div class="property-favorite">❤️</div>
                    <div class="property-badge">长租优惠</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>北柳府仓储物流中心</span>
                        <span class="property-price">32泰铢/㎡/月</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>王经理 · 服务分91</span>
                    </div>
                    
                    <div class="property-location">北柳府·近304号公路</div>
                    
                    <div class="property-details">
                        <div>8,000㎡ | 层高10m | 承重2T</div>
                        <div class="price-comparison">区域均价：35泰铢/㎡/月</div>
                    </div>
                    
                    <div class="industrial-features">
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">📦</div>
                            <div>仓储面积</div>
                            <div class="industrial-feature-value">7,200㎡</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🚪</div>
                            <div>装卸门</div>
                            <div class="industrial-feature-value">12个</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">📶</div>
                            <div>网络</div>
                            <div class="industrial-feature-value">光纤接入</div>
                        </div>
                        <div class="industrial-feature">
                            <div class="industrial-feature-icon">🚚</div>
                            <div>物流配套</div>
                            <div class="industrial-feature-value">完善</div>
                        </div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag">保税仓库</div>
                        <div class="property-tag">24小时出入</div>
                        <div class="property-tag">监控系统</div>
                        <div class="property-tag">防火系统</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item">
                <div class="nav-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="nav-item active">
                <div class="nav-icon">🏭</div>
                <div>厂房</div>
            </div>
            <div class="nav-item">
                <div class="nav-icon">✉️</div>
                <div>发布</div>
            </div>
            <div class="nav-item">
                <div class="nav-icon">⭐</div>
                <div>收藏</div>
            </div>
            <div class="nav-item">
                <div class="nav-icon">👤</div>
                <div>我的</div>
            </div>
        </nav>
    </div>
    
    <!-- 详情页内容 -->
    <div id="detail-page" style="display: none;">
        <!-- 顶部品牌区域 -->
        <header class="brand-header">
				 <a href="workshoplist.html" class="back-button" style="position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--text);">
        <i class="fas fa-arrow-left"></i>
    </a>
            <div class="brand-title">吉象出海</div>
            <div class="brand-subtitle">泰国工业地产服务</div>
        
        </header>
        
        <div class="detail-header">
            <div class="detail-back" onClick="showListPage()">←</div>
            <div class="detail-title">
                <h1>罗勇高新科技园标准厂房</h1>
                <div class="detail-price">18,500泰铢/月</div>
            </div>
        </div>
        
        <div class="tab-container">
            <div class="tabs">
                <div class="tab active" data-tab="info">厂房信息</div>
                <div class="tab" data-tab="facility">配套设施</div>
                <div class="tab" data-tab="location">位置周边</div>
                <div class="tab" data-tab="agent">经纪人</div>
            </div>
        </div>
        
        <!-- 厂房信息标签页 -->
        <div class="tab-content active" id="info-tab">
            <div class="detail-content">
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-info-circle"></i> 基本信息</h2>
                    
                    <div class="industrial-details">
                        <div class="detail-item">
                            <div class="detail-label">厂房面积</div>
                            <div class="detail-value">2,500 ㎡</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">层高</div>
                            <div class="detail-value">9 米</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">地面承重</div>
                            <div class="detail-value">3 吨/㎡</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">使用年限</div>
                            <div class="detail-value">30 年</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">电力容量</div>
                            <div class="detail-value">800 KVA</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">供水能力</div>
                            <div class="detail-value">50 吨/日</div>
                        </div>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-tags"></i> 厂房特点</h2>
                    <div class="detail-features">
                        <div class="feature-tag">保税仓库</div>
                        <div class="feature-tag">环评通过</div>
                        <div class="feature-tag">24小时安保</div>
                        <div class="feature-tag">高速网络</div>
                        <div class="feature-tag">双电路供电</div>
                        <div class="feature-tag">消防系统</div>
                        <div class="feature-tag">中央监控</div>
                        <div class="feature-tag">货车通道</div>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-building"></i> 厂房描述</h2>
                    <p>现代化标准厂房，位于罗勇高新科技园核心区域，适合电子、精密仪器、医疗器械等高新技术企业。厂房采用钢结构，层高9米，配备10吨行车，地面承重3吨/平方米。独立供电系统，双路供电保障，电力容量800KVA。</p>
                    <p>园区提供完善的配套设施：24小时安保监控、高速光纤网络、员工餐厅、停车场等。厂房可按照客户需求进行分隔，最小可分租500平方米。</p>
                </div>
            </div>
        </div>
        
        <!-- 配套设施标签页 -->
        <div class="tab-content" id="facility-tab">
            <div class="detail-content">
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-cogs"></i> 生产设施</h2>
                    <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                        <li>10吨行车（2台）</li>
                        <li>4个标准卸货平台（高度1.2米）</li>
                        <li>压缩空气管道系统</li>
                        <li>工业级排风系统</li>
                        <li>防静电地面</li>
                        <li>无尘车间（可选区域）</li>
                    </ul>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-plug"></i> 能源设施</h2>
                    <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                        <li>双路供电系统（800KVA）</li>
                        <li>独立变电站</li>
                        <li>工业用水供应（50吨/日）</li>
                        <li>污水处理系统</li>
                        <li>天然气管道接入</li>
                    </ul>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-vector-square"></i> 厂房平面图</h2>
                    <div class="detail-plan">
                        <i class="fas fa-image"></i> 厂房平面示意图
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 位置周边标签页 -->
        <div class="tab-content" id="location-tab">
            <div class="detail-content">
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-map-marked-alt"></i> 地理位置</h2>
                    <div class="detail-map">
                        <!-- 这里实际是地图 -->
                        地图展示区域
                    </div>
                    <p>地址：罗勇府罗勇高新科技园A区8栋</p>
                    <p>距离林查班深水港：5公里</p>
                    <p>距离乌塔堡国际机场：35公里</p>
                    <p>距离曼谷市区：120公里</p>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-truck"></i> 物流交通</h2>
                    <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                        <li>紧邻7号高速公路（1公里）</li>
                        <li>距林查班深水港5公里</li>
                        <li>距铁路货运站8公里</li>
                        <li>园区内物流公司驻点</li>
                        <li>海关保税仓库相邻</li>
                    </ul>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-industry"></i> 产业环境</h2>
                    <p>园区聚集了多家国际知名企业，包括：</p>
                    <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                        <li>日本电产（Nidec）</li>
                        <li>三菱电机</li>
                        <li>霍尼韦尔</li>
                        <li>西门子医疗</li>
                        <li>比亚迪电子</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 经纪人标签页 -->
        <div class="tab-content" id="agent-tab">
            <div class="detail-content">
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-user-tie"></i> 经纪人信息</h2>
                    <div class="agent-contact">
                        <div class="agent-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="agent-info">
                            <div class="agent-name">陈经理</div>
                            <div class="agent-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                4.9 (87评价)
                            </div>
                            <div>工业地产专家 · 8年经验</div>
                        </div>
                        <button class="contact-button">联系经纪人</button>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-medal"></i> 专业资质</h2>
                    <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                        <li>泰国工业地产协会认证经纪人</li>
                        <li>BOI申请专家</li>
                        <li>精通中泰英三语</li>
                        <li>成功交易厂房面积超20万平方米</li>
                    </ul>
                </div>
                
                <div class="detail-section">
                    <h2 class="detail-section-title"><i class="fas fa-comments"></i> 客户评价</h2>
                    <div style="background: #f8f9fa; padding: 15px; border-radius: var(--radius); margin-top: 10px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                            <strong>张先生 · 电子制造企业</strong>
                            <div class="agent-rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                        <p>"陈经理专业高效，帮助我们找到了符合生产要求的厂房，并协助完成了BOI申请，整个流程非常顺利。"</p>
                        <div style="color: #6B7280; font-size: 12px; margin-top: 5px;">2023年10月15日</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
	    <!-- 底部导航菜单 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item active">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </a>
        <a href="message.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </a>
        <a href="postlist.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-plus-circle"></i></div>
            <div class="tab-label">发布</div>
        </a>
        <a href="entrust.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </a>
        <a href="profile.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </a>
    </div>
	
    <script>
	        // 底部导航交互
        document.querySelectorAll('.tab-bar a.tab-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if(this.classList.contains('active')) {
                    e.preventDefault();
                }
                document.querySelectorAll('.tab-bar a.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
        // 列表页功能
        document.querySelectorAll('.property-favorite').forEach(icon => {
            icon.addEventListener('click', function(e) {
                e.stopPropagation();
                this.classList.toggle('active');
                this.textContent = this.classList.contains('active') ? '❤️🔥' : '❤️';
            });
        });
        
        // 卡片点击跳转详情页
        document.querySelectorAll('.property-card').forEach(card => {
            card.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                showDetailPage(id);
            });
        });
        
        // 筛选步骤点击
        document.querySelectorAll('.filter-step').forEach(step => {
            step.addEventListener('click', function() {
                document.querySelectorAll('.filter-step').forEach(s => s.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 区域标签点击
        document.querySelectorAll('.region-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.region-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 详情页标签切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // 更新标签状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 更新内容显示
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(`${tabId}-tab`).classList.add('active');
            });
        });
        
        // 显示详情页
        function showDetailPage(id) {
            document.getElementById('list-page').style.display = 'none';
            document.getElementById('detail-page').style.display = 'block';
            window.scrollTo(0, 0);
        }
        
        // 显示列表页
        function showListPage() {
            document.getElementById('detail-page').style.display = 'none';
            document.getElementById('list-page').style.display = 'block';
            window.scrollTo(0, 0);
        }
    </script>
</body>
</html>